<template>
  <div class="home-container">
    <!-- Hero Section -->
    <section class="hero-section">
      <div class="hero-content">
        <h1>探索学习之旅</h1>
   
        <div class="search-container">
          <el-input
            v-model="searchQuery"
            placeholder="搜索课程、主题或技能..."
            :prefix-icon="Search"
            clearable
            @keyup.enter="handleSearch"
          >
            <template #append>
              <el-button @click="handleSearch">搜索</el-button>
            </template>
          </el-input>
        </div>
      </div>
    </section>

    <!-- Announcement Bar -->
    <AnnouncementBar />

    <div class="main-content">
      <!-- Hot Courses Section -->
      <section class="course-section">
        <div class="section-header">
          <h2>热门课程</h2>
          <router-link to="/courses" class="view-more">查看更多</router-link>
        </div>
        <CourseCardList :courses="hotCourses" :loading="loadingHot" />
      </section>

      <!-- Personalized Recommendations Section (for logged in users) -->
      <section v-if="userStore.isLoggedIn" class="course-section">
        <div class="section-header">
          <h2>为你推荐</h2>
          <span class="section-subtitle">基于你的兴趣和收藏记录</span>
        </div>
        <CourseCardList :courses="personalRecommendations" :loading="loadingPersonal" />
      </section>

      <!-- Browse History Based Recommendations (for logged in users) -->
      <section v-if="userStore.isLoggedIn" class="course-section">
        <div class="section-header">
          <h2>猜你喜欢</h2>
          <span class="section-subtitle">基于你的浏览历史</span>
        </div>
        <CourseCardList :courses="historyRecommendations" :loading="loadingHistory" />
      </section>

      <!-- Categories Section -->
      <section class="categories-section">
        <div class="section-header">
          <h2>课程分类</h2>
        </div>
        <CategoryList :categories="categories" :loading="loadingCategories" />
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/user'
import request from '@/utils/request'
import AnnouncementBar from '@/components/home/AnnouncementBar.vue'
import CourseCardList from '@/components/home/CourseCardList.vue'
import CategoryList from '@/components/home/CategoryList.vue'

const router = useRouter()
const userStore = useUserStore()
const searchQuery = ref('')

// Data
const hotCourses = ref([])
const personalRecommendations = ref([])
const historyRecommendations = ref([])
const categories = ref([])

// Loading states
const loadingHot = ref(true)
const loadingPersonal = ref(true)
const loadingHistory = ref(true)
const loadingCategories = ref(true)

// Fetch data on component mount
onMounted(() => {
  fetchHotCourses()
  fetchCategories()
  
  if (userStore.isLoggedIn) {
    fetchPersonalRecommendations()
    fetchHistoryRecommendations()
  }
})

// Methods
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    router.push({
      path: '/courses',
      query: { search: searchQuery.value.trim() }
    })
  }
}

const fetchHotCourses = async () => {
  loadingHot.value = true
  try {
    hotCourses.value = await request.get('/recommendation/hot', { limit: 8 })
  } catch (error) {
    console.error('Failed to fetch hot courses:', error)
  } finally {
    loadingHot.value = false
  }
}

const fetchPersonalRecommendations = async () => {
  loadingPersonal.value = true
  try {
    personalRecommendations.value = await request.get(`/recommendation/personal/${userStore.userInfo.id}`, { limit: 8 })
  } catch (error) {
    console.error('Failed to fetch personal recommendations:', error)
  } finally {
    loadingPersonal.value = false
  }
}

const fetchHistoryRecommendations = async () => {
  loadingHistory.value = true
  try {
    historyRecommendations.value = await request.get(`/recommendation/history/${userStore.userInfo.id}`, { limit: 8 })
  } catch (error) {
    console.error('Failed to fetch history recommendations:', error)
  } finally {
    loadingHistory.value = false
  }
}

const fetchCategories = async () => {
  loadingCategories.value = true
  try {
    categories.value = await request.get('/category/all')
  } catch (error) {
    console.error('Failed to fetch categories:', error)
  } finally {
    loadingCategories.value = false
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  min-height: 100vh;
}

.hero-section {
  background: linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-5));
  padding: 80px 20px;
  text-align: center;
  color: white;
  
  .hero-content {
    max-width: 800px;
    margin: 0 auto;
    
    h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      font-weight: 700;
    }
    
    p {
      font-size: 1.25rem;
      margin-bottom: 2rem;
      opacity: 0.9;
    }
    
    .search-container {
      max-width: 600px;
      margin: 0 auto;
      
      :deep(.el-input__inner) {
        height: 50px;
        font-size: 1rem;
      }
      
      :deep(.el-input-group__append) {
        button {
          height: 50px;
          padding: 0 20px;
        }
      }
    }
  }
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
}

.course-section, .categories-section {
  margin-bottom: 40px;
  
  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    
    h2 {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--el-text-color-primary);
      margin: 0;
      flex: 1;
    }
    
    .section-subtitle {
      font-size: 0.9rem;
      color: var(--el-text-color-secondary);
      margin-left: 10px;
    }
    
    .view-more {
      color: var(--el-color-primary);
      text-decoration: none;
      font-size: 0.9rem;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style> 